import { useState, useEffect } from "react";
import { Form, Popover, message, Select } from "antd";
import CommonModal from "@/components/CommonModal";
import { returnWarehousing, getWarehouseList } from "../service";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { InfoCircleOutlined } from '@ant-design/icons';

const ExchangeWarehouse = ({ handleCancel, returnClerkParams, fetchList }) => {

	const [form] = Form.useForm();
	const [userData, setUserData] = useState([]); // 拿货员列表
  const [open, setOpen] = useState(false);
  const [isOk, setIsOk] = useState(false);

  //获取退货员列表
	const queryWarehouseList = async () => {
		const { data, success } = await getWarehouseList();
		if (success) {
			if (data) {
				const list = data.map(v => {
          return {
            label: v.warehouseName,
            value: v.id,
						kind: v.kind
          }
				});
				setUserData(list);
			}
		}
	};

	useEffect(() => {
		queryWarehouseList();
		setOpen(true);
	}, []);

  //点击确定
	const onOk = () => {
		form.validateFields().then(async value => {
      START_LOADING();
      const automaticStorage = value.automaticStorage;
      const warehouseId = value.warehouseId;
      const obj = userData.filter(v => v.value == warehouseId)[0] || {};
      const uniqueCode = returnClerkParams.map(v => v.uniqueCode).join();
			const { success } = await returnWarehousing({
				uniqueCode,
				warehouseId,
				warehouseName: obj.label,
				warehouseType: obj.kind,
				automaticStorage,
			});
      END_LOADING();
			if (success) {
				message.success("操作成功");
				setIsOk(true);
        setOpen(false);
			}
		});
	};

	const onCancel = () => {
		setOpen(false);
	};

  const afterClose = () => {
    if(isOk) {
      fetchList();
    }
    handleCancel();
  }

	const tipsIcon = (
		<Popover content={
			<div>
				<div><span className="common-color9">当选择为“是”时</span>，自动创建入库单并审核<br/>且跳过扫码入库流程直接入库增加库存；</div>
				<div><span className="common-color9">当选择为“否”时</span>，自动创建待审核的入库单<br/>需要手动审核后完成扫码入库流程增加库存</div>
			</div>
		}>
			<InfoCircleOutlined className="common-color9" style={{ marginLeft: '4px', cursor: 'pointer' }} />
		</Popover>
	)

	const options = [
		{ label: '是', value: 1 },
		{ label: '否', value: 0 },
	]

	return (
		<CommonModal 
      title="退供转入仓" 
      open={open} 
      onOk={onOk} 
      onCancel={onCancel}
      afterClose={afterClose}
      width="553px" 
    >
			<Form 
        form={form} 
        name="exchange-warehouse-modal" 
        initialValues={{ pickerId: 0 }}
        style={{ marginTop: "12px" }}
      >
				<SubTitle symbol as="s2" title="退货去向变更（单次）" wrapStyle={{ marginBottom: 16 }} />
				<div>将所选唯一码退货去向由<span className="common-color9">退回供应商</span>变更为<span className="common-color9">销退入库</span>，并生成新的销退入库单</div>
				<SubTitle symbol as="s2" title="退货仓库" wrapStyle={{ marginBottom: 16, marginTop: 20 }} />
				<Form.Item label="" name="warehouseId" rules={[{ required: true, message: "请选择退货仓库" }]}>
					<Select showSearch placeholder="退货仓库" allowClear options={userData}></Select>
				</Form.Item>
				<SubTitle symbol as="s2" title={<div>自动入库{tipsIcon}</div>} wrapStyle={{ marginBottom: 16, marginTop: 20 }} />
				<Form.Item label="" name="automaticStorage" rules={[{ required: true, message: "请选择自动入库" }]}>
					<Select showSearch placeholder="自动入库" allowClear options={options}></Select>
				</Form.Item>
			</Form>
		</CommonModal>
	);
};

export default ExchangeWarehouse;
